<script lang="ts" setup>
import { ref, watch } from 'vue';
import toLine from '@/utils';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import { useCopy } from './hooks/useCopy';

// 弹窗显示逻辑
const props = defineProps<{
  title: string;
  visiable: boolean;
}>();

const dialogVisiable = ref<boolean>(props.visiable);

const emits = defineEmits(['update:visiable']);

const hanldeClick = () => {
  dialogVisiable.value = !dialogVisiable.value;
  emits('update:visiable', dialogVisiable.value);
};

watch(
  () => dialogVisiable.value,
  (val) => {
    emits('update:visiable', val);
  },
);

// 选择并复制图标
const copyIcon = (key: string) => {
  const iconHtml = `<el-icon-${toLine(key)}></el-icon-${toLine(key)}>`;
  useCopy(iconHtml);
};
</script>

<template>
  <el-button type="primary" @click="hanldeClick">
    <slot></slot>
  </el-button>
  <div class="mn-choose-icon-dialog-body-height">
    <el-dialog v-model="dialogVisiable" :title="title" :width="600" custom-class="icon-dialog">
      <div class="icon-group">
        <div v-for="key in Object.keys(ElementPlusIconsVue)" :key="key" class="icon-group-item" @click="copyIcon(key)">
          <div>
            <component :is="`el-icon-${toLine(key)}`"></component>
          </div>
          <div>{{ key }}</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.icon-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  &-item {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    cursor: pointer;
    height: 70px;
  }
  svg {
    width: 2em;
    height: 2em;
  }
}
</style>
